<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="jwr"  uri="http://jawr.net/tags-el" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<div id="locationPage">

	<form:form modelAttribute="location" id="contactInfoForm" name="contactInfoForm" action="location/save">
		<div class="gray-form-background" style="margin: 0px 0px; height: 100%; clear: both;">
				<div id="locationNameDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Location Name *:</div>
					<div
						style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:hidden path="id"/>
							<form:input path="name" maxlength="35" style="width: 233px;" 
								cssClass="required" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateLocation')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-name" class="x-icon" style="display: none;position: static;">Location name is required.</div>						
					</div>
					
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						URL*:</div>
					<div
						style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:input path="url" maxlength="100" cssClass="required validate-url"
								cssStyle="width: 213px;" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateLocation')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-url" class="x-icon" style="display: none; position: static;">Website URL is required.</div>
						<div id="advice-validate-url-url" class="x-icon" style="display: none; position: static;">Invalid URL.</div>						
					</div>
					
				</div>
				
				<div style="clear: both;height: 7px;">&nbsp;</div>
				<div id="locationAddressDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Email Id *:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:input path="emailId"
								cssStyle="width: 233px;"  maxlength="100"
								cssClass="required validate-email" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateLocation')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-emailId" class="x-icon" style="display: none; position: static;">Email Id is required.</div>		
						<div id="advice-validate-email-emailId" class="x-icon" style="display: none; position: static;">Invalid Email Id.</div>						
					</div>
					
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Phone #*:</div>
					<div
						style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:input path="phoneNumber" maxlength="100"
								cssStyle="width: 213px;" cssClass="required validate-india-phone-number"
								onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateLocation')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-phoneNumber" class="x-icon" style="display: none; position: static;">Phone Number is required.</div>
						<div id="advice-validate-india-phone-number-phoneNumber" class="x-icon" style="display: none; position: static;">Invalid Phone Number.</div>
					</div>
				</div>
				<div style="clear: both;height: 7px;">&nbsp;</div>
				<div id="locationAddressDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Address 1 *:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:input path="address.line1"
								cssStyle="width: 233px;"  maxlength="100"
								cssClass="required" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateLocation')"/>
						</div>
						
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-address.line1" class="x-icon" style="display: none; position: static;">Address is required.</div>						
					</div>
					
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Address 2:</div>
					<div
						style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:input path="address.line2" maxlength="100"
								cssStyle="width: 213px;" 
								onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateLocation')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
					</div>
				</div>
				<div style="clear: both;height: 7px;">&nbsp;</div>
				<div id="locationCityStateDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						City *:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:input path="address.city" maxlength="35"
								name="orgSetup.locationCity" cssStyle="width: 233px;"  
								cssClass="required" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateLocation')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-address.city" class="x-icon" style="display: none; position: static;">City is required.</div>	
					</div>
					
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						State *:</div>
					<div
						style="margin-top: 4px; margin-left: 10px; width: 55px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:input path="address.state" cssStyle="width: 48px;" maxlength="2"  onchange="changeToUppercase(this)"
								cssClass="required validate-india-state" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateLocation')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						
						
					</div>
					<div style="margin-top: 30px; margin-left: 10px; width: 130px; float: left;">
						<a href="http://en.wikipedia.org/wiki/List_of_Indian_States_and_Union_Territories_by_two-letter_codes"
							target="_blank">See State Code List</a>
					</div>
					<div style="margin-top: 25px; line-height: 40px; margin-left: 10px;float: left;">
						<div id="advice-required-address.state" class="x-icon" style="display: none; position: static;">State is required.</div>
						<div id="advice-validate-india-state-address.state" class="x-icon" style="display: none; position: static;">Invalid State Code.</div>	
					</div>
					
				</div>
				<div style="clear: both;height: 7px;">&nbsp;</div>
				<div id="locationZipDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Pin *:</div>
						<div style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
							<div style="width: 120px; float: left;">
								<span class="font-form-field-detail"></span><br>
								<div class="form-fieldtop">
									<div class="form-fieldb1"></div>
									<div class="form-fieldb2"></div>
								</div>
								<div class="form-fieldcontent">
									<form:input path="address.zip" cssStyle="width: 103px;"  maxlength="6" 
										cssClass="required validate-zip-india" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateLocation')"/>
								</div>
								<div class="form-fieldtop">
									<div class="form-fieldb2"></div>
									<div class="form-fieldb1"></div>
								</div>	
								
							</div>
							<div style="clear: both;">
								<div id="advice-required-address.zip" class="x-icon" style="display: none; position: static;">Pin is required.</div>
								<div id="advice-validate-zip-india-address.zip" class="x-icon" style="display: none; position: static;">Invalid Pin.</div>
							</div>
												
						</div>
						
					
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 30px; line-height: 40px; width: 110px; vertical-align: middle;">
						Display Name *:</div>
						<div style="margin-top: 10px; margin-left: 10px; width: 220px; float: left;">
							<div style="margin-top: 0px;  width: 220px;">
								<span class="font-form-field-detail"></span><br>
								<div class="form-fieldtop">
									<div class="form-fieldb1"></div>
									<div class="form-fieldb2"></div>
								</div>
								<div class="form-fieldcontent">
									<form:input path="displayName" maxlength="35"
										cssStyle="width: 213px;" cssClass="required"/>
								</div>
								<div class="form-fieldtop">
									<div class="form-fieldb2"></div>
									<div class="form-fieldb1"></div>
								</div>
							</div>
							<div id="advice-required-displayName" class="x-icon" style="display: none; position: static;">Display Name is required.</div>
						</div>
				</div>
				
				<div style="clear: both;"></div>
				<div id="displayNameDiv">
				<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 20px; width: 110px; vertical-align: middle;">
						Google Embed String *:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 540px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:textarea path="embedString" 
								cssStyle="width: 533px;height:200px"  maxlength="1000"
								cssClass="required validate-description noexpand-textarea" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateGallery')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-embedString" class="x-icon" style="display: none; position: static;">Please enter Picasa embed String.</div>		
					</div>
					
				</div>
				<div style="clear: both;"></div>
				<div style="padding-bottom: 10px;"></div>
			</div>
			<div style="float: right;padding-right: 20px;padding-top: 20px;">
				<c:if test="${location.id != 0 }">
					<input class="btnClass" id="btnDeleteLocation" name="btnDeleteLocation" type="button" 
					onclick="deleteLocation('${location.id}')" value="Delete"/>
				</c:if>
				
				<input class="btnClass" id="btnUpdateLocation" name="btnUpdateLocation" type="button" value="Submit"/>
			</div>
	</form:form>
</div>

<script type="text/javascript">
	dojo.connect(eleById("btnUpdateLocation"), "onclick", null, function(){
			var updateLocationValidator = new Validation('contactInfoForm', {onSubmit : true});
			updateLocationValidator.reset();					
			var isValid = updateLocationValidator.validate();
			if(isValid){
				Spring.remoting.submitForm('btnUpdateLocation', 'contactInfoForm'); 
				return true;
			}
			return false;
	});
</script>